<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>offset</title>
<style>
    html {
        border: 1px solid #000000;
    }

    body {
        border: 3px solid #004499;
    }
</style>
</head>
<body style="margin-top: 7px;">
<div style="position: absolute;top:0;left:0;margin: 0;
background-color: #ffff00;width:100px;
border: 0;height: 10px;"
     id='container'>
    <div id="innerDiv" style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;" +
                "padding:0;width:1px;height:1px;'>
        <!-- checkDiv -->
        <div id='checkDiv'></div>
    </div>

    <table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;
                "padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'>
        <tr>
            <!-- td -->
            <td id="td"></td>
        </tr>
    </table>
</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    var body = document.body;
    var bodyMarginTop = parseFloat(body.style.marginTop) || 0;

    document.writeln("bodyMarginTop : " + bodyMarginTop + "<br>");

    var container = document.getElementById("container"),
            checkDiv = document.getElementById("checkDiv"),
            td = document.getElementById("td"),
            innerDiv = document.getElementById("innerDiv");

    document.writeln("checkDiv.offsetTop : " + checkDiv.offsetTop + "<br>");

    document.writeln("td.offsetTop : " + td.offsetTop + "<br>");

    checkDiv.style.position = "fixed";
    checkDiv.style.top = "20px";

    // safari subtracts parent border width here which is 5px
    document.writeln("checkDiv.offsetTop : " + checkDiv.offsetTop + "<br>");

    checkDiv.style.position = checkDiv.style.top = "";

    innerDiv.style.overflow = "hidden";
    innerDiv.style.position = 'relative';

    document.writeln("checkDiv.offsetTop : " + checkDiv.offsetTop + "<br>");

    document.writeln("body.offsetTop : " + body.offsetTop + "<br>");


    document.writeln("body.offset.top : " + body.getBoundingClientRect().top + "<br>");

    document.writeln("checkDiv.offset.top : " + checkDiv.getBoundingClientRect().top + "<br>");


    document.writeln("container.offsetParent.nodeName : "
            + container.offsetParent.nodeName + "<br>");

    document.writeln("container.offset.top : " + container.getBoundingClientRect().top + "<br>");

    document.writeln("container.offset.top kissy : " + KISSY.DOM.offset(container).top + "<br>");

    KISSY.DOM.offset(container, {
                top:0
            });

    document.writeln("after set " + "<br>");

    document.writeln("container.offset.top : " + container.getBoundingClientRect().top + "<br>");

    document.writeln("container.offset.top kissy : " + KISSY.DOM.offset(container).top + "<br>");

    document.writeln("container.css top : " + container.style.top + "<br>");

    document.writeln("document.documentElement.clientTop : " + document.documentElement.clientTop + "<br>");

</script>
</body>
</html>